<template>
  <div class="new-arrival" ref="newArrival">
    <common
      :data="NewArrivals"
      :mainData="NewArrivalTop"
      :ProductLoading="ProductLoading"
      ref="common"
      :title="New"
      :totalPages="totalPages"
      @changedSort="getSortCondition"
      @changePrice="getSortPrice"
      @select="selectNew"
      @changePage="changePages"
      @selectSku="selectSku"
      @selectCategory="selectCategory"
      @selectSecondCategory="selectSecondCategory"
      @selectThreeCategory="selectThreeCategory"
    >
    </common>
    <router-view></router-view>
  </div>
</template>
<script>
  import {ERR_OK} from 'api/config'
  import {mapMutations,mapGetters} from 'vuex'
  import {NewArrival,NewArrivalTop} from 'api/new-arrival'
  import {getCategory} from 'common/js/dom'
  import common from "components/common/common";
  import monitoring from '../../common/js/monitoring';
  export default {
    computed: {
      ...mapGetters([
        'categories'
      ])
    },
    data() {
      return {
        NewArrivals: [],
        NewArrivalTop: {},
        PageNumber: 1,
        categoryId:'',
        New:'New',
        val:'ShelfTimeNewToOld',
        price: {
          min: 1,
          max: 999
        },
        totalPages:0,
        ProductLoading:false
      }
    },
    created() {
      this.setFocus(-1)
      this.setCategoryName('')
      monitoring.openNew();//todo Facebook Pixel & Google Analytic Code    openNew
      this.setClass('')
      this._NewArrivalTop()
    },
    methods: {
      selectNew(item) {
        this.$router.push({
          path: `/new/${item.urlKeyWords}/${item.sku}`
        })
        this.setDisc(item)
      },
      selectSku(item) {
        this.$router.push({
          path: `/new/${item.urlKeyWords}/${item.sku}`
        })
        this.setDisc(item)
      },
      selectCategory(item) {
        let nameAry = item.name.replace(/,/g,'').replace(/ & /g,' ').split(' ');
        let name = nameAry.join('-')
        this.$router.push({
          path: `/new?category=${name}`
        })
        this.setFocus(1)
      },
      selectSecondCategory(itemSecond) {
        let nameAry = itemSecond.name.replace(/,/g,'').replace(/ & /g,' ').split(' ');
        let name = nameAry.join('-')
        this.$router.push({
          path: `/new?category=${name}`
        })
        this.setFocus(2)
      },
      selectThreeCategory(itemSecond,itemThree) {
        let nameAry = itemThree.name.replace(/,/g,'').replace(/ & /g,' ').split(' ');
        let name = nameAry.join('-')
        this.$router.push({
          path: `/new?category=${name}`
        })
        this.setFocus(3)
      },
      changePages(num) {
        this.ProductLoading = true
        this.NewArrivals = []
        NewArrival(num,this.val,this.price.min, this.price.max,this.categories.categoryId,this.ExcludedSkus).then((res) => {
          this.NewArrivals = res.data
          this.totalPages = res.totalPages
          this.ProductLoading = false
        })
      },
      getSortCondition(val) {
        this.val = val
      },
      getSortPrice(min, max) {
        this.price.min = min
        this.price.max = max
      },
      _NewArrivalTop() {
        if(this.$route.query.page) {
          this.PageNumber = this.$route.query.page
        }else {
          this.PageNumber = 1
        }
        NewArrivalTop(this.PageNumber).then((res) => {
          if(res.data[0] !== undefined) {
            this.NewArrivalTop = res.data[0]
            this.ProductLoading = true
            this.ExcludedSkus = res.data[0].sku
          }
          return NewArrival(this.PageNumber,this.val,this.price.min, this.price.max,this.categories.categoryId,this.ExcludedSkus)
        })
          .then((res) => {
            this.NewArrivals = res.data
            this.totalPages = res.totalPages
            this.ProductLoading = false
          })
      },
      ...mapMutations({
        setDisc: 'SET_FEATURED_LIST',
        setClass: 'SET_CATEGORIES',
        setFocus: 'SET_CATEGORY_FOCUS',
        setCategoryName: 'SET_CATEGORY_NAME'
      })
    },
    watch: {
      val(newVal) {
        this._NewArrivalTop()
      },
      price: {
        handler(newVal, oldVal) {
          this._NewArrivalTop()
        },
        deep: true
      },
      categories(){
        this._NewArrivalTop()
      }
    },
    components: {
      common
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .new-arrival
    background #fff
    margin auto
</style>
